<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/zhuce.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
    <template id="root">
        <main>
            <!-- 表单 -->
            <div class="wrap">
                <!-- 左边背景 -->
                <div class="wrap_bg"></div>
                <!-- 右边登录的内容 -->
                <div class="login">
                    <!-- 上标题 -->
                    <div class="login_hd">
                        <div class="hd_left">
                            <img src="images/小米.png" class="logo">
                            小米帐号
                        </div>

                        <ul class="hd_right">
                            <li><a href="#">用户协议</a></li>
                            <li><a href="#">隐私政策</a></li>
                            <li><a href="#">帮助中心</a></li>
                            <li><a href="#">中文(简体)</a></li>
                        </ul>
                    </div>

                    <div class="login_box">
                        <div class="main">
                            <!-- <img src="images/two.png" class="two"> -->
                            <!-- <h2 class="title">登录</h2> -->
                            <a href="javascript:;" :class="i==1?'title':'title2'" @click="i=1">登录</a>
                            <a href="javascript:;" :class="i==2?'title':'title2'" @click="i=2">注册</a>
                            <!-- 登录 -->
                            <div v-if="i==1">
                                <div class="user_box">
                                    <div class="user">
                                        <input type="text" placeholder="邮箱/手机号码/小米ID" v-model="username">
                                    </div>
                                </div>
                                <div class="user_box">
                                    <div class="user">
                                        <input type="password" placeholder="密码" v-model="password">
                                    </div>
                                </div>
                                <div class="ch-box">
                                    <input id="ch-box" class="ch-box" type="checkbox" v-model="isChecked"
                                        @click="checkbox">
                                    <div id="text">
                                        已阅读并同意小米帐号<a class="pointer">用户协议</a>和<a class="pointer">隐私政策</a>
                                    </div>
                                </div>
                                <button class="login_btn" @click="Login">登录</button>
                                <div class="login_other">
                                    <a href="#" class="l_l">忘记密码？</a>
                                    <a href="#" class="l_right">手机号登录</a>
                                </div>

                            </div>
                            <!-- 注册 -->
                            <div v-else>
                                <div id="in">
                                    <select id="country" v-model="cityvalue">
                                        <option :value="item.value" v-for="item in city">{{ item.text }}</option>
                                    </select>
                                    <div id="in">
                                        <select class="check">
                                            <option>+89</option>
                                        </select>
                                        <input class="phonenum" placeholder="手机号" v-model.number="phone">
                                    </div>
                                    <div id="in">
                                        <input type="text" class="yzm" placeholder="短信验证码" v-model.number="yzm">
                                    </div>
                                    <div id="yzm">
                                        <button><a href="#">获取验证码</a></button>
                                    </div>
                                </div>
                                <div class="ch-box">
                                    <input id="ch-box" class="ch-box" type="checkbox" v-model="isChecked1"
                                        @click="checkbox">
                                    <div id="text">
                                        已阅读并同意小米帐号<a class="pointer">用户协议</a>和<a class="pointer">隐私政策</a>
                                    </div>
                                </div>
                                <div>
                                    <button id="log-in" class="pointer" @click="Register"> 注册</button>
                                </div>
                                <div class="action">
                                    <a id="a1" class="pointer">收不到验证码？</a>
                                </div>
                            </div>
                            <div class="login_method">
                                <h3>其他登录方式</h3>
                                <div class="method_list">
                                    <a href="#"><img src="images/zhifubao.png" alt=""></a>
                                    <a href="#"><img src="images/weixin.png" alt=""></a>
                                    <a href="#"><img src="images/QQ.png" alt=""></a>
                                    <a href="#"><img src="images/sina.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </main>
    </template>
</body>
<script>
    const app = Vue.createApp({
        template: "#root",
        data() {
            return {
                i: 1,
                username: '',
                password: '',
                yzm: '',
                isChecked: false,
                phone: '',
                isChecked1: false,
                cityvalue: 'China',
                city: [
                    { value: 'China', text: '中国' },
                    { value: 'britain', text: '英国' },
                    { value: 'american', text: '美国' },
                    { value: 'Australia', text: '澳大利亚' },
                ]
            }
        },
        methods: {
            Login() {
                if (this.username == '' || this.password == '') {
                    alert('账号或密码为空，请输入')
                } else {
                    if (!this.isChecked) {
                        alert('请同意用户条款')
                    }
                }
            },
            Register() {
                if (this.phone == '' || this.yzm == '') {
                    alert('输入不能为空')
                } else {
                    const reg = /^[1][3,4,5,7,8][0-9]{9}$/
                    if (!reg.test(this.phone)) {
                        alert('请输入正确的手机号')
                    } else {
                        if (!this.isChecked) {
                            alert('请同意用户条款')
                        } else {
                            alert('注册成功')
                        }

                    }
                }
            },
            checkbox() {
                this.isChecked = !this.isChecked
            }
        }
    })
    app.mount("#app")
</script>

</html>